<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const props = defineProps({
  title: {
    type: String,
    default: '工作台',
  },
  title2: {
    type: String,
    default: '工具栏',
  },
  menuList: {
    type: Array,
    default: () => {
      return [
        {
          name: '数据管理',
          path: '/workspace/eventsystem',
          type: '1',
        },
        {
          name: '事件体系',
          path: '/workspace/dataManagement',
          type: '1',
        },
        {
          name: '事件知识库',
          path: '/workspace/eventsystem1',
          type: '1',
        },
        {
          name: '文本自动标注',
          path: '/workspace/eventsystem2',
          type: '2',
        },
      ];
    },
  },
});

const activeIndex = ref(0);
const router = useRouter();
const menuItemClick = (item, key) => {
  activeIndex.value = key;
  setTimeout(() => {
    router.push(`${item.path}`);
  }, 10);
};
const route = useRoute();
onMounted(() => {
  // 首次加载初始化
  const defaultIndex = props.menuList.findIndex(
    (item) => item.path === route.path,
  );
  activeIndex.value = defaultIndex;
});
</script>

<template>
  <div class="treeWrap">
    <!-- 具名插槽 -->
    <div class="header">
      <div class="pl-14">{{ props.title }}</div>
    </div>
    <div class="menuListBox">
      <template v-for="(item, key) in props.menuList" :key="key">
        <div
          class="menuItem"
          :class="activeIndex === key ? 'activeItem' : ''"
          v-if="item.type === '1'"
          @click="menuItemClick(item, key)"
        >
          <span>{{ item.name }}</span>
        </div>
      </template>
    </div>
    <div class="header">
      <div class="pl-14">{{ props.title2 }}</div>
    </div>
    <div class="menuListBox menuListBox2">
      <template v-for="(item, key) in props.menuList" :key="key">
        <div
          class="menuItem"
          :class="activeIndex === key ? 'activeItem' : ''"
          v-if="item.type === '2'"
          @click="menuItemClick(item, key)"
        >
          <span>{{ item.name }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<style type="stylus" scoped>
.treeWrap {
  padding: 10px;
  .header {
    width: 100%;
    height: 46px;
    line-height: 46px;
    background-image: url('/src/assets/images/titleBg2.png');
    background-size: 100% 100%;
    font-size: 20px;
  }
  .menuListBox {
    padding: 10px 0;
    width: 260px;
    height: 310px;
    background-color: #091d21;
    .menuItem {
      padding-left: 26px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
    }
  }
  .menuListBox2 {
    padding: 10px 0;
    height: calc(100vh - 500px);
  }
  .content {
    padding: 5px 20px;
  }
  .activeItem {
    background-color: #1c4d53;
  }
}
</style>
